<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="/wybx/jquery.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style lang="scss" scoped>
		*{
			padding: 0px;
			margin: 0px;
		}
		html,body{
			/*width: 1920px;*/
			height: calc(100vh);
			margin: 0 auto;
			overflow: hidden;
			font-family:"微软雅黑";
		}
		@media screen and (max-width: 2000px) {
			html,body {width: 1920px}
		}
		@media screen and (max-width: 1700px) {
			html,body {width: 1280px}
		}
		@media screen and (max-width: 1200px) {
			html,body {width: 900px}
		}
		#app{
			width: 100%;
		}
		.center-box{
			width: 100%;
			height: calc(75vh);
			/*background: red;*/
			padding-left: 100px;
			background-image: url("../bottom.jpg");
			background-size: 100% calc(70vh);
		}
		@media screen and (max-width: 2000px) {
			.center-box{padding-left: 100px;}
		}
		@media screen and (max-width: 1700px) {
			.center-box{padding-left: 80px;}
		}
		.center-box-left{
			float: left;
			width: 33%;
			height: calc(100vh);
			/*background: green;*/
			padding: 30px;
			border-radius: 10px;
			/*text-align: center;*/
			margin-top: 0px;
			margin-left: -60px;
		}
		.school-bg{
			width: 100%;
			height: 100px;
			/*background:red;*/

		}
		.center-box-right{
			margin-left: 40px;
			float: left;
			width: 55%;
			height: calc(100vh);
			/*background: blue;*/
			text-align: center;
			position: relative;
		}
		.erweima-top{
			font-size: 16px;
			line-height: 30px;
			color: #000;
		}
		.student{
			/*color: #ca363d;*/
			line-height: calc(13vh);
			margin-top: calc(15vh);
			font-size: 80px;
			color: transparent;
			background-color : red;
			text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
			-webkit-background-clip : text;
		}
		@media screen and (max-width: 2000px) {
			.student {font-size: 80px;}
		}
		@media screen and (max-width: 1700px) {
			.student {font-size: 60px;}
		}
		@media screen and (max-width: 1200px) {
			.student {font-size: 40px;}
		}
		[v-cloak]{
			display: none;
		}
		.el-carousel__item{
			color: #475669;
			font-size: 14px;
			opacity: 0.95;
			line-height: 200px;
			margin: 0;
		}

		.el-carousel__item:nth-child(2n) {
			background-color: #99a9bf;
		}

		.el-carousel__item:nth-child(2n+1) {
			background-color: #d3dce6;
		}
		.footer{
			position: fixed;
			width: 100%;
			text-align: center;
			height: 40px;
			background: #9e1517;
			line-height: 40px;
			bottom:0;
		}
		@media screen and (max-width: 1700px) {
			.footer{
				width: 1280px;
			}
		}
		@media screen and (max-width: 1200px) {
			.footer{
				width: 900px;
			}
		}
		span{
			color: #fff;
		}
		.huang{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 20%;
			height: 30%;
		}
		.left-right{
			/*display: flex;*/
			/*justify-content: space-between;*/
		}
		.left-right-top{
			font-size: 16px;
			margin-top: calc(-1.8vh);
		}
		.img-box{
			float: left;
			width: 42%;
			height: 100%;
			margin: calc(1.5vh) auto 20px;
			text-align: center;
		}
		.gif{
			margin-top: -40px;
			width: 100%;
			height: 15%;
		}
		.img-box2{
			margin-left: calc(8vh);
		}
		@media screen and (max-width: 1700px) {
			.img-box2{
				margin-left: calc(6vh);
			}
		}
	</style>
</head>


<body>
<div id="app" :style="{display: 'block'}">
<!--	<img src="../WechatIMG122.jpeg" style="width: 100%;height: 400px;">-->
	<el-carousel :interval="4000" type="card" height="calc(35vh)">
		<el-carousel-item v-for="item in schoolImg" :key="item">
			<img :src="item" height="100%" width="100%">
		</el-carousel-item>
	</el-carousel>
	<div class="footer">
<!--		<div class="school-bg">-->
<!--			<img src="../logo2.png" style="width: 300px;height: 40px;margin: 0 auto;">-->
<!--			<span>-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;xxxx技术支持-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</span>-->
<!--		</div>-->
		<span>联系我们</span> <span>地址：福建省厦门市集美区孙坂南路1251号</span> <span>邮编：361021</span> <span>传真：0592-6363206</span> <span>校办电话：0592-6363203</span> <span>招生电话：0592-6667566/6667579/6667577</span>
	</div>
	<div class="center-box">
		<div class="center-box-left">
			<div class="gif">
				<img src="../timg.gif" style="width: 100%;height: calc(12vh)">
			</div>
			<div class="img-box">
				<p class="left-right-top">智小厦公众号</p>
				<img class="left-right" src="../left.jpg" style="width: 120%;height: calc(35vh);margin-top: calc(2vh);">
			</div>
			<div class="img-box img-box2">
				<p class="left-right-top">校园720度全景</p>
				<img class="left-right" src="../right.jpg" style="width: 120%;height: calc(35vh);margin-top: calc(2vh);">
			</div>

<!--			<p class="erweima-top">-->
<!--				1. 打开厦工 app <i style="color: red">在线报到</i>-->
<!--			</p>-->
<!--			<p class="erweima-top">-->
<!--				2. 步骤六 <i style="color: red">到校报到</i> 扫一扫-->
<!--			</p>-->
<!--			<img src="../erweima.jpg" style="width: 90%;height: calc(40vh);margin: 5px auto;border-radius: 10px;">-->
		</div>
		<div class="center-box-right">
			<img src="../ren.png" class="huang">
			<div v-html="tableData.xm"></div>
			<p class="student" style="line-height: calc(13vh);margin-top: calc(4vh);">{{tableData.welcome}}</p>
		</div>

	</div>


</div>



</body>

<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>var ctx = "\/wybx/";</script>
<script>
	var content = new Vue({
		el: '#app',
		data: {
			tableData: {},
			list: {},
			id: -2,
			speed: 3,
			count: -1,
			countOld: -1,
			schoolImg: ["../slide-01.jpg","../slide-02.jpg","../slide-03.jpg","../slide-04.jpg","../slide-05.jpg"]
		},
		created() {
			$.ajax({
				type: "get",
				url: ctx + "xszc/getSpeedCount",
				success: function (msg) {
					content.id = msg.count;
					content.count = msg.count;
					content.speed = msg.speed;
					console.log("woxianyunxig");
					if(!msg.count){
						content.id = 1;
					}
					if(!msg.speed){
						content.speed = 6;
					}
				},
				error: function (msg) {
					console.log(msg);
				}
			});
			this.getData();
		},
		mounted: function () {
			this.clearTimeSet = window.setInterval(() => {
				setTimeout(this.getData, 0);
				console.log(this.speed);
			}, this.speed*1000)
			// this.getData();
		},
		methods:{
			getData: function() {
				$.ajax({
					type: "get",
					url: ctx + "xszc/getData",
					data: {id: content.id},
					success: function (msg) {
						console.log(msg);
						content.tableData = msg;
						console.log(content.tableData);
						if(msg){
							content.list = msg;
							content.id++;
							console.log("我是id+1了："+content.id);
						}else{
							console.log("我是历史1："+content.list);
							content.tableData = content.list;
							console.log("我是历史2："+content.tableData);
						}
					},
					error: function (msg) {
						console.log(msg);
					}
				});
				// $("#info_submit").attr("data-dismiss", "modal");
			},
		},
		watch: {
			speed: function(newVal, oldVal){
				console.log("我他也必须爆发客");
				clearInterval(this.clearTimeSet);
				this.clearTimeSet = window.setInterval(() => {
						console.log("我是速度新的"+newVal+"我是旧的"+oldVal);
						console.log("不同我运行了");
						$.ajax({
							type: "get",
							url: ctx + "xszc/getSpeedCount",
							success: function (msg) {
								content.count = msg.count;
								content.speed = msg.speed;  //更新速度
								console.log("woxianyunxig");
								if(!msg.count){
									content.id = 1;
								}
								if(!msg.speed){
									content.speed = 6;
								}
							},
							error: function (msg) {
								console.log(msg);
							}
						});
					setTimeout(this.getData, 0);
					console.log(newVal);
				}, newVal*1000)
			},
			count: function(newVal, oldVal){
				clearInterval(this.clearTimeSet);
				this.clearTimeSet = window.setInterval(() => {
					console.log("我他也必须爆发客");
					$.ajax({
						type: "get",
						url: ctx + "xszc/getSpeedCount",
						success: function (msg) {
							content.count = msg.count;
							content.speed = msg.speed;  //更新速度
							console.log("woxianyunxig");
							if(!msg.count){
								content.id = 1;
							}
							if(!msg.speed){
								content.speed = 6;
							}
						},
						error: function (msg) {
							console.log(msg);
						}
					});
					if(this.countOld != newVal){  //如果新的和旧的不同才运行
						this.countOld = newVal;
						console.log("我是新的"+newVal+"我是旧的"+oldVal);
						console.log("不同我运行了");
						$.ajax({
							type: "get",
							url: ctx + "xszc/getSpeedCount",
							success: function (msg) {
								content.id = msg.count;//更新启始
								content.count = msg.count;
								content.speed = msg.speed;
								console.log("woxianyunxig");
								if(!msg.count){
									content.id = 1;
								}
								if(!msg.speed){
									content.speed = 6;
								}
							},
							error: function (msg) {
								console.log(msg);
							}
						});
					}
					setTimeout(this.getData, 0);
					console.log(newVal);
				}, content.speed*1000)
			}


		},
	})
</script>

</html>
